<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ui-progressbar {
            box-sizing: border-box;
            border: 1px silver solid;
            height: 30px;
            margin: 10px;
        }
        .ui-progressbar>div {
            box-sizing: border-box;
            height: 100%;
            background-color: #999999;
        }
        .ui-slider {
            box-sizing: border-box;
            border: 1px silver solid;
            position: relative;
            height:30px;
            margin: 10px;
            margin-top: 30px;
            overflow: visible;
        }
        .ui-slider>div {
            box-sizing: border-box;
            display: inline-block;
            height: 100%;
            background-color: #999999;
        }
        .ui-slider>span {
            box-sizing: border-box;
            border: 1px silver solid;
            display: inline-block;
            position: absolute;
            width: 20px;
            height: 36px;
            margin-top: -4px;
            margin-left: -10px;
            background-color: #d7dde4;
        }
        .ui-slider>em, .ui-slider>b {
            position: absolute;
            bottom: 30px;
        }
    </style>
</head>
<body>
<div class="first" data-bind="type: 'slider', data: demo1"></div>
<div class="second" data-bind="type: 'slider', data: demo2"></div>
<div class="third" data-bind="type: 'progressbar', data: demo3"></div>
<script src="script.js"></script>
</body>
</html>